import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
import { FormsModule, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent implements OnInit {

  @ViewChild('sun') sun: any;
  constructor(private render: Renderer2,
              private fb: FormBuilder) { }
  powers = ['Really Smart', 'Super Flexible',
    'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
  public hr = 'clark';
  submitted = false;

  form!: FormGroup;
  onSubmit(): void { this.submitted = true; }
  ngOnInit(): void {
    this.initForm();
    setTimeout(() => {
      this.model.name = '右';
    }, 3000);
  }
  initForm(): void {
    this.form = this.fb.group({
      shengsi: [],
      laiqu: []
    });
    this.form.controls.shengsi.disable();
    this.form.controls.shengsi.valueChanges.subscribe((val) => {
      console.log(val, '向死而生');

    });
    this.form.controls.shengsi.setValue(1);
  }
  event: any = () => { };
  handleBlur(e) {
    const el = this.sun.nativeElement;
    console.log('blur', e.target.className);
    const event = this.render.listen(el, 'focus', this.handleFocus);
    this.event = event;
  }
  handleFocus(e) {
    console.log('focus', e.target.className);
  }
  clickf() {
    this.event();
  }
}
const myHero = new Hero(42, 'SkyDog',
  'Fetch any object at any distance',
  'Leslie Rollover');
console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
